{% extends "layout.html"%} {% block link%}
<link rel="stylesheet" href="/public/css/user.css" />
{% endblock %} {% block main%}
<div class="main">
    <div class="container">
        <div class="box clearfix">
            <div class="h">
                <h2 class="title">个人中心</h2>
            </div>

            <div class="sidebar">
                <div class="c">
                    <div class="menu-box">
                        <h3 class="title">账户管理</h3>
                        <ul class="list">
                            <li class="active">
                                <a href="">个人信息</a>
                            </li>
                            <li>
                                <a href="">修改密码</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="c profile clearfix">
                    <div class="avatar-box">
                        <div class="avatar-area">
                            {% if user.avatar != ""%}
                            <div
                                class="avatar-bg"
                                style="
                                    background-image: url('{{user.avatar}}');
                                "
                            ></div>
                            {%else%}
                            <div
                                class="avatar-bg"
                                style="
                                    background-image: url('/public/images/n-avator-bg.png');
                                "
                            ></div>
                            {%endif%}
                            <div class="avatar-edit" id="avatar-edit"></div>
                            <form
                                action="/avatar"
                                method="post"
                                style="display: none"
                                id="avatar-form"
                                enctype="multipart/form-data"
                            >
                                <input type="file" id="avatar" name="avatar" />
                            </form>
                        </div>
                    </div>
                    <div class="info-box">
                        <div class="info-list">
                            <div class="h">
                                <h3>基础资料</h3>
                            </div>
                            <div class="list">
                                <p>
                                    <span class="k">姓名：</span>
                                    <span class="v">{{user.username}}</span>
                                </p>
                                <p>
                                    <span class="k">性别：</span>
                                    <span class="v">男</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    let avatarElement = document.querySelector("#avatar");
    let avatarFormElement = document.querySelector("#avatar-form");
    let avatarEditElement = document.querySelector("#avatar-edit");

    avatarEditElement.onclick = function () {
        avatarElement.click();
    };

    avatarElement.onchange = function () {
        avatarFormElement.submit();
    };
</script>
{% endblock %}
